<template>
	<a-card>
		<a-tabs :activeKey="activeKey" @tabClick="callback">
			<a-tab-pane tab="试卷查询" key="1">
				<a-form layout="inline">
					<a-form-item>
						<a-select v-model="listQuery.select_value" style="width: 120px">
							<a-select-option value="全部">全部</a-select-option>
							<a-select-option value="eu.name">考生姓名</a-select-option>
							<a-select-option value="eu.workno">考生工号</a-select-option>
							<a-select-option value="ee.name">试卷名称</a-select-option>
							<a-select-option value="ee.title">试卷标题</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item><a-input-search enterButton @search="onSearch" /></a-form-item>
				</a-form>
				<a-divider type="vertical" />
				<a-table :columns="columns" :dataSource="tabledata" bordered rowKey="id" :pagination="false">
					<template slot="name" slot-scope="text">
						<a href="javascript:;">{{ text }}</a>
					</template>
					<template slot="hascompletion" slot-scope="text">
						<a-tag color="pink" v-if="text == 0">机器改卷</a-tag>
						<a-tag color="blue" v-else>需人工改卷</a-tag>
					</template>
					<template slot="action" slot-scope="text, record, index">
						<span v-if="text == 1">
							<a-button type="primary" @click="doMarking(record, index)" v-if="record.hascompletion == 1 && record.teacherid == null && record.finish == 100">
								阅卷
							</a-button>
							<a-button type="primary" disabled v-else>阅卷完毕</a-button>
						</span>
						<span disabled v-else>试卷失效无法编辑</span>
					</template>
					<template slot="fraction" slot-scope="text, record, index">
						<a-badge :overflowCount="999" :count="text+'分'" />
					</template>
					<template slot="finish" slot-scope="text, record, index">
						<a-badge :count="text + '%'" :overflowCount="999" :numberStyle="{ backgroundColor: '#52c41a' }" />
					</template>
				</a-table>
				<a-pagination
					showSizeChanger
					:pageSize.sync="listQuery.page_size"
					:pageSizeOptions="pagesizeoptions"
					@showSizeChange="onShowSizeChange"
					:total="listQuery.total"
						@change="onChange"
					v-model="listQuery.page_number"
				/>
			</a-tab-pane>
			<a-tab-pane tab="阅卷室" key="2">
				<div class="hasrow" v-if="JSON.stringify(rowrecord) != '{}'">
					<div class="header">
						<a-divider orientation="right"><a-button @click="saveMarking" type="danger">完成评卷</a-button></a-divider>
						<a-collapse accordion activeKey="1">
							<a-collapse-panel header="当前阅卷信息" key="1" >
								<p>
									<detail-list size="large" :col="2" slot="headerContent" style="margin-left: 44px;">
										<detail-list-item term="考生名称">{{ rowrecord.username }}</detail-list-item>
										<detail-list-item term="考试名称">{{ rowrecord.examname }}</detail-list-item>
										<detail-list-item term="当前得分">{{ rowrecord.fraction }}</detail-list-item>
										<detail-list-item term="交卷时间">{{ rowrecord.submitdate }}</detail-list-item>
										<detail-list-item term="试卷标题">{{ rowrecord.title }}</detail-list-item>
										<detail-list-item term="试卷ID">{{ rowrecord.examid }}</detail-list-item>
									</detail-list>
								</p>
							</a-collapse-panel>
						</a-collapse>
					</div>
					<div class="content" style="margin-top: 50px;">
						<a-divider orientation="left">考生所答</a-divider>
						<span v-for="(item, index) in tkdata" :key="item.id" style="margin: 5px;">
							<a-input-group compact>
								<h3>{{ index + 1 }}.{{ item.questiontitle }}({{ item.qustiontypegoal }}分)</h3>
								<a-input
									addonBefore="得分:"
									:value="item.upqgoal"
									@change="e => onTkChange(e, item.id)"
									placeholder="请输入分数"
									maxLength="25"
									style="width: 120px;margin-left: 10px;"
								/>
							</a-input-group>
							<a-textarea disabled :value="item.upqresultinput" :rows="4" />
						</span>
					</div>
				</div>
				<div class="norow" v-else>
					 <a-divider >当前并没有选择试卷</a-divider>
					<a-steps :current="3">
						<a-step>
							<!-- <span slot="title">Finished</span> -->
							<template slot="title">
								查询试卷
							</template>
							<span slot="description">查询并涮选需要阅卷的试卷</span>
						</a-step>
						<a-step title="阅卷" description="点击并开始阅卷" />
						<a-step title="完成评分" description="完成评分后提交数据,阅卷完毕!" />
					</a-steps>
				</div>
			</a-tab-pane>
		</a-tabs>
	</a-card>
</template>

<script>
import { GetUserPapers, GetUqpByMarking, SaveMarking } from '@/api/exam';
import DetailList from '../../components/tool/DetailList';
const DetailListItem = DetailList.Item;
export default {
	components: { DetailListItem, DetailList },
	data() {
		return {
			tabledata: [],
			activeKey: '1',
			columns: [
				{
					title: 'ID',
					dataIndex: 'id',
					align: 'center'
				},
				{
					title: '考试名称',
					dataIndex: 'examname',
					scopedSlots: { customRender: 'name' },
					align: 'center'
				},
				{
					title: '试卷标题',
					dataIndex: 'title',
					scopedSlots: { customRender: 'name' },
					align: 'center'
				},
				{
					title: '考生姓名',
					dataIndex: 'username',
					align: 'center'
				},
				{
					title: '考生工号',
					dataIndex: 'workno',
					align: 'center'
				},
				{
					title: '得分',
					dataIndex: 'fraction',
					align: 'center',
					scopedSlots: { customRender: 'fraction' }
				},
				{
					title: '改卷方式',
					dataIndex: 'hascompletion',
					align: 'center',
					scopedSlots: { customRender: 'hascompletion' },
					filters: [
						{
							text: '人工',
							value: '1'
						},
						{
							text: '自动',
							value: '0'
						}
					],
					onFilter: (value, record) => record.hascompletion == value
				},
				{
					title: '完成度',
					dataIndex: 'finish',
					align: 'center',
					scopedSlots: { customRender: 'finish' }
				},
				{
					title: '交卷时间',
					dataIndex: 'submitdate',
					align: 'center'
				},
				{
					title: '操作',
					dataIndex: 'display',
					key: 'x',
					scopedSlots: { customRender: 'action' },
					align: 'center',
					filters: [
						{
							text: '可阅卷',
							value: '100'
						},
						{
							text: '无',
							value: '0'
						}
					],
					onFilter: (value, record) => record.hascompletion == 1 && record.teacherid == null && record.finish == 100
				}
			],
			pagesizeoptions: ['20', '50', '200', '5000'],
			listQuery: {
				page_size: 20,
				page_number: 1,
				order_column: 1,
				order_dir: 'asc',
				search_value: '',
				select_value: '全部',
				total: 0
			},
			rowrecord: {},
			tkdata: {}
		};
	},
	methods: {
		initTable() {
			GetUserPapers(this.listQuery).then(res => {
				this.tabledata = res.data;
				this.listQuery.total = res.recordsTotal;
			});
		},
		onShowSizeChange(current, pageSize) {
			this.listQuery.page_size = pageSize;
			this.listQuery.page_number = current;
			this.initTable();
		},
		onSearch(value) {
			this.listQuery.search_value = value;
			this.initTable();
		},
		callback(key) {
			this.activeKey = key;
		},onChange(current){
			this.listQuery.page_number = current;
			this.initTable();
		},
		doMarking(record, index) {
			this.rowrecord = record;
			this.rowrecord.index = index;
			this.activeKey = '2';
			var psotjson = {
				workno: record.workno,
				examid: record.examid
			};
			GetUqpByMarking(psotjson).then(res => {
				this.tkdata = res.data;
			});
		},
		onTkChange(e, key) {
			const { value } = e.target;
			const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
			if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
				const newData = [...this.tkdata];
				const target = newData.filter(item => key === item.key)[0];
				if (target) {
					if (target.qustiontypegoal < value) {
						target.upqgoal = '';
					} else {
						target.upqgoal = value;
					}
					this.tkdata = newData;
				}
			}
		},
		saveMarking() {
			var _this = this;
			var goal = this.rowrecord.fraction;
			var pf = 0;
			const newData = [...this.tkdata];
			for (var i = 0; i < newData.length; i++) {
				pf += Number(newData[i].upqgoal);
				if (this.utils.isEmty(newData[i].upqgoal)) {
					this.$message.error('第:' + (i + 1) + '题未评分！');
					return;
				}
			}
			goal = goal + pf;
			var postjson = {
				upq: {
					id: newData[0].upqid,
					goal: pf
				},
				userpaper: {
					id: newData[0].userpaperid,
					fraction: goal,
					teacherid: 100100
				}
			};
			this.$confirm({
				title: '您确定吗？',
				content: '自动改分为:' + this.rowrecord.fraction + ',此次评分为:' + pf + ',最终得分为:' + goal,
				onOk() {
					SaveMarking(postjson).then(res => {
						if (res.result) {
							_this.$message.success('操作成功!', 2);
							_this.initTable();
							_this.rowrecord={};
						} else {
							_this.$message.error(res.error, 5);
						}
					});
				},
				onCancel() {},
				class: 'test'
			});
		}
	},
	mounted() {
		this.initTable();
	}
};
</script>
